<template>
  <div>
    <view-cover src="./background/girl2.jpg">
      <template #tit>归档</template>
    </view-cover>
    <layout-col>
      <template #left>
        <!-- 插槽使用: 添加"item"类即可产生卡片样式, item之外可以再自定义别的样式类 -->

        <!-- 左区 文章列表 -->
        <div class="left-col">
          <!-- <ul
              class="infinite-list"
              v-infinite-scroll=""
              style="overflow: auto"
            > -->
          <ul>
            <li
              class="item article-list-big"
              v-for="article in articles"
              :key="article.id"
            >
              <!-- 文章封面 -->
              <div
                class="article-cover"
                @click="handleSelectArticle(article.id)"
              >
                <div class="mask"></div>
                <img :src="article.cover_picture" alt="" />
              </div>
              <div class="article-brief">
                <p class="time">
                  <i class="el-icon-time"></i> 发布于{{
                    article.created_time.substr(0, 10)
                  }}<span class="mask"></span>
                </p>
                <h3 class="title" @click="handleSelectArticle(article.id)">
                  {{ article.title }}
                </h3>
                <p class="info">
                  <span class="recommend" v-show="article.is_recommend"
                    ><i class="el-icon-star-on"></i> 推荐
                    <div class="mask"></div
                  ></span>
                  <span
                    class="category"
                    @click="$router.push(`/category?id=${article.category_id}`)"
                    ><i class="el-icon-menu"></i> {{ article.category_name }}
                  </span>
                  <span class="comment"
                    ><i class="el-icon-s-comment"></i>
                    {{ article.comments_num }}
                  </span>
                  <span class="visitCount"
                    ><i class="el-icon-view"></i> {{ article.visit_count }}
                  </span>
                </p>
                <p class="description">{{ article.description }}</p>
              </div>
            </li>
          </ul>
        </div>
      </template>
      <!-- 右区 -->
      <template #right>
        <div class="item">
          <!-- 月份列表 -->
          <ul>
            <li
              v-for="(month, index) in months"
              :key="index"
              @click="selectMonth(month.year, month.month)"
              class="category-item"
            >
              <h2>{{ month.year }} - {{ month.month }} ({{ month.count }})</h2>
            </li>
          </ul>
        </div>
      </template>
    </layout-col>
  </div>
</template>

<script>
import LayoutCol from '@/components/LayoutCol.vue'
import ViewCover from '@/components/ViewCover.vue'
export default {
  name: 'HomeViewFile',
  components: { LayoutCol, ViewCover },
  created() {
    this.getMonths()
    this.getArticlesByMonth()
  },
  data() {
    return {
      months: [],
      articles: [],
      year: 2022,
      month: 5,
    }
  },
  methods: {
    // 获取所有月份
    getMonths() {
      this.$http.get(`/articles?type=month_stat`).then((res) => {
        // console.log('months-res', res)
        const { code, msg, result } = res
        if (code == 0) {
          this.months = result
        }
      })
    },
    // 根据月份获取文章列表
    getArticlesByMonth() {
      this.$http
        .get(`/articles?year=${this.year}&month=${this.month}`)
        .then((res) => {
          // console.log('months-articles-res', res)
          const { code, msg, result } = res
          if (code == 0) {
            this.articles = result
          }
        })
    },
    // 选择某个分类
    selectMonth(year, month) {
      this.year = year
      this.month = month
      this.getArticlesByMonth()
    },
    // 选择某篇文章
    handleSelectArticle(id) {
      this.$router.push(`/article?id=${id}`)
    },
  },
}
</script>

<style lang="stylus" scope>
@import '~styles/theme.styl';

// 遮罩
.mask
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  z-index: 2
  background var(--mask)
  transition: all .6s
  & + img
    transition: all .6s
  &:hover + img
    transform: scale(1.1);
.main
  // .infinite-list
  //   height:1000px
  .left
    .item
      padding: 0
  // 左区
  .left-col
    .article-list-big
      display flex
      height: 300px
      overflow hidden
      // &:hover
      //   box-shadow: 1px 1px 5px 5px rgba(255, 99, 138,0.5);
      .article-cover
        flex: 3
        position relative
        overflow hidden
        img
          width: 100%
          height: 100%
          border-radius: 10px 0 0 10px
          transition: all .6s
          &:hover
            transform: scale(1.1);
      .article-brief
        flex: 2
        padding-left: 30px;
        margin 20px 10px 10px 0
        .time
          position relative
          padding: 5px 10px;
          width: max-content;
          background-color: #fff5e0
          font-size: 12px;
          font-weight: bolder;
          color: #ffcc00;
          border-radius: 6px;
        .title
          // margin: 20px 0
          padding: 10px 8px 25px 8px;
          text-align right
          font-size 18px
          font-weight: bolder
          transition: color .2s ease-out
          &:hover
            color: #ff638a
        .description
          margin-top: 30px
          padding: 0 8px
          font-size 15px
        .info
          display flex
          justify-content: right
          align-items end
          font-size 13px
          height: 25px
          .recommend
            position relative
            padding: 6px 12px
            width: max-content
            background-color: #fff5e0
            font-size: 12px
            font-weight: bolder
            color: #ffcc00
            border-radius: 6px
          span
            margin: 0px 10px
            padding 3px 0
            white-space: nowrap;
            &.category
              transition: color .2s ease-out
              &:hover
                color: #ff638a
    .el-button
      width: 100%
      border-radius: 10px
      margin: 20px auto
      background var(--div)
.category-item
  padding 10px 20px
  font-weight: bold
  transition: all .1s ease-out
  h2
    opacity 0.95
    transition: all .1s ease-out
  &:hover
    color: #ff638a
  &:hover h2
    opacity 1
</style>
